<template>
  <div>
    <!-- 搜索表单：收集输入的会员查询条件 -->
    <div style="margin: 15px">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="手机号">
          <el-input v-model="search.mobile" placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item label="用户类型">
          <el-select v-model="search.userType" placeholder="请选择">
            <el-option label="投资人" value="1"></el-option>
            <el-option label="借款人" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户状态">
          <el-select v-model="search.status" placeholder="请选择">
            <el-option label="锁定" value="0"></el-option>
            <el-option label="正常" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch"
            >查询</el-button
          >
          <el-button @click="handleClear">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 展示数据的表格 -->
    <div>
      <el-table :data="list" border style="width: 100%">
        <el-table-column label="#" type="index"> </el-table-column>
        <el-table-column prop="userType" label="用户类型" width="80">
          <template slot-scope="scope">
            <el-tag :type="scope.row.userType === 1 ? 'success' : ''">
              {{ scope.row.userType === 1 ? "投资人" : "借款人" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" width="120">
        </el-table-column>
        <el-table-column prop="name" label="用户姓名" width="80">
        </el-table-column>
        <el-table-column prop="idCard" label="身份证号"> </el-table-column>
        <el-table-column prop="integral" label="用户积分" width="60">
        </el-table-column>
        <el-table-column prop="createTime" label="注册时间" width="120">
        </el-table-column>
        <el-table-column prop="bindStatus" label="绑定状态" width="90">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.bindStatus === 0" type="warning">
              未绑定
            </el-tag>
            <el-tag v-else-if="scope.row.bindStatus === 1" type="success">
              绑定成功
            </el-tag>
            <el-tag v-else type="danger"> 绑定失败 </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="用户状态" width="60">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'warning'">
              {{ scope.row.status === 1 ? "正常" : "锁定" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              size="mini"
              :type="scope.row.status === 1 ? 'primary' : 'warning'"
              @click="handleLock(scope.row)"
            >
              {{ scope.row.status === 1 ? "锁定" : "解锁" }}
            </el-button>
            <el-button
              size="mini"
              type="primary"
              @click="handleShowLogs(scope.row)"
              >显示日志</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-top: 20px; text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[2, 3, 4, 5, 6, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 展示登录日志的对话框 -->
    <div>
      <el-dialog title="用户登录日志" :visible.sync="dialogTableVisible">
        <el-table :data="logs">
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column property="ip" label="IP"></el-table-column>
          <el-table-column
            property="createTime"
            label="登录时间"
          ></el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import userInfoApi from "@/api/user-info.js";
export default {
  data() {
    return {
      dialogTableVisible: false,
      //条件检索的对象
      search: {},
      list: [],
      pageNum: 1,
      pageSize: 3,
      total: 0,
      logs: [],
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    //显示登录日志事件函数
    handleShowLogs(row) {
      userInfoApi.loginLogs(row.id).then((r) => {
        this.logs = r.data.items;
        //展示对话框
        this.dialogTableVisible = true;
      });
    },
    //锁定解锁按钮事件函数
    handleLock(row) {
      //锁定和解锁复用了此方法
      this.$confirm(
        `此操作将${row.status === 1 ? "锁定" : "解锁"}会员《${
          row.mobile ? row.mobile : row.nickName
        }》, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          userInfoApi.lock(row.id, row.status === 1 ? 0 : 1).then((r) => {
            this.$message.success(r.msg);
            //刷新页面数据
            this.fetchData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: `已取消${row.status === 1 ? "锁定" : "解锁"}`,
          });
        });
    },
    //搜索表单的提交按钮事件函数
    handleSearch() {
      this.fetchData();
    },
    //清空搜索表单条件按钮事件
    handleClear() {
      this.search = {};
      this.pageNum = 1;
      // this.pageSize = 3;
      this.fetchData();
    },
    //分页导航的事件函数
    handleSizeChange(size) {
      //pageSize改变时的回调
      this.pageSize = size;
      this.fetchData();
    },
    handleCurrentChange(num) {
      //页码改变时的回调
      this.pageNum = num;
      this.fetchData();
    },
    fetchData() {
      userInfoApi.page(this.pageNum, this.pageSize, this.search).then((r) => {
        //r代表响应拦截器放行的响应体对象
        //this.list = r.data.page
        // console.log(r.data.page.records);
        this.total = Number(r.data.page.total);
        this.list = r.data.page.records;
      });
    },
  },
};
</script>
